<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="root"></div>

    <script src="./js/react.development.js"></script>
    <script src="./js/react-dom.development.js"></script>
    <script src="./js/babel.min.js"></script>

    <script type="text/babel">
      const root = ReactDOM.createRoot(document.querySelector("#root"));
      // render 可以渲染虚拟DOM、纯字符串、组件

      // 1.  JavaScript 表达式作为 Props
      // const id = "box";
      // root.render(<div id={id}>我是一个内容</div>);

      // 2. 字符串字面量
      // root.render(<div id="box">我是一个内容</div>);

      // 3. Props 默认值为 “True”
      // function Person(props) {
      //   console.log(props); // {hello: true}

      //   return <div>我是 Person</div>;
      // }
      // root.render(<Person hello></Person>);

      // 4. 属性展开
      const obj = {
        name: "张三",
        age: 18,
        address: "宝安",
      };

      function Person(props) {
        console.log(props); // {name: '', age: '', address: ''}

        return (
          <div>
            <div>姓名：{props.name}</div>
            <div>年龄：{props.age}</div>
            <div>地址：{props.address}</div>
          </div>
        );
      }

      // root.render(
      //   <Person name={obj.name} age={obj.age} address={obj.address}></Person>
      // );

      root.render(<Person {...obj}></Person>);
    </script>
  </body>
</html>
